<template>
  <div
    @tap="goToDetail(item)"
    class="items">
    <div
      :style="{ backgroundColor: type.color }"
      class="left_color"
    />
    <div
      class="title je-audio-btn"
    >
      <div class="title_name">
        {{ shortName(item.TASK_BT) }}
      </div>
      <div
        v-show="isTimeout(item.TASK_YQWCSJ)"
        class="yq"
      >
        已延期
      </div>
    </div>
    <div class="time">
      <div
        style="flex: 1;"
        class="je-audio-btn"
      >
        <!-- <span>{{  }}</span>
        {{ item.TASK_RWKSSJ }} -->
        <p class="name-and-date">{{ item.JOB_RWFQR }}{{ item.TASK_RWKSSJ }}</p>
      </div>
      <div
        @tap="star($event, item)"
        v-if="type.value !== 'send'"
        class="star je-audio-btn"
        style="margin-top: 6px;"
      >
        <Icon
          v-if="item.JOBMX_JX==='1'"
          type="jeicon-stars"
          size="xxxs"
          style="font-size:13px;color:#FFD37F;margin-right: 3px;"
        />
        <Icon
          v-else
          type="jeicon-stars-o"
          size="xxxs"
          style="font-size:13px;color:#FFD37F;margin-right: 3px;"
        />
        <span class="add-start">加星</span>
      </div>
    </div>
    <div
      v-if="type.value === 'send'"
      v-html="getTaskStatus(item)"
      class="user_list"
    >
      <div class="user_item" />
    </div>
  </div>
</template>

<script>
import Icon from '@/components/icon';

export default {
  name: 'Items',
  components: {
    Icon,
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    type: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  created() {

  },
  methods: {
    // 是否延期
    isTimeout(item) {
      if (!item) return;
      return new Date().getTime() > new Date(item.replaceAll('-', '/')).getTime();
    },
    // 切换加星
    star(e, item) {
      e.stopPropagation();
      this.$emit('changeStar', item);
      // 点击加星，重置可加载状态
      // this.pullRefreshWrapper.refresh(true);
    },
    // 详情
    goToDetail(item) {
      this.$router.push({
        path: '/JE-PLUGIN-TRANSACTION/detail',
        query: {
          id: '__transactionDetailView',
          title: '任务内容',
          item,
          type: this.type,
        },
      });
      // JE.openWindow({
      //   url: './pages_detail_index.html',
      //   id: '__transactionDetailView',
      //   title: '任务内容',
      //   extras: {
      //     item,
      //     type: this.type,
      //   },
      //   hideNView: true,
      // });
    },
    // 发布任务状态
    getTaskStatus(item) {
      // if (this.type.value !== 'send') return;
      const users = item.TASK_ZPRID.split(',');
      const divs = [];
      if (item.TASK_TASKFS_CODE === 'once') {
        // JOB_WLQRWS	未领取
        // JOB_YLQRWS	领取
        // JOB_YWCRS	完成
        const count = users.length;
        const wcCount = item.JOB_YWCRS; // 完成
        const lqCount = item.JOB_YLQRWS; // 领取

        for (let i = 0; i < count; i++) {
          let cls = '';
          if (i < wcCount) {
            cls = 'wc';
          } else if (i < lqCount) {
            cls = 'lq';
          }
          divs.push(`<div class="user_item ${cls}"></div>`);
        }
        return divs.join('');
      }
      return '';
    },
    shortName(name) {
      const maxlength = 13;
      if (name.length > maxlength) {
        return `${name.slice(0, maxlength)}...`;
      }
      return name;
    },
  },
};
</script>

<style lang="less">
  @import "~@/theme/index.less";
  .items {
    box-sizing: border-box;
    width: 100%;
    position: relative;
    background: @fill-base;
    margin-bottom:10 * @hd;
    padding: 5 * @hd 20 * @hd;
    border-radius:6px;
    // font-size: @font-size-icontext;
    color: #000000;
    overflow: hidden;
    &:active {
      background: #eeeeee;;
    }
    .left_color{
      width: 10px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      // background: #7DBAFD;
    }
    .title {
      width: 100%;
      font-size: @font-size-caption;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title_name {
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .yq {
        padding: 1px 5px;
        color: #ffffff;
        background: #FF8C8C;
        font-size: 10 * @hd;
        border-radius: 4px;
        // transform: scale(0.7);
        height: 20 * @hd;
        line-height: 20 * @hd;
        // width: 50 * @hd;
        text-align: center;
      }
    }
    .time {
      color: #A9ABA9;
      // margin: 5px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 7px;
      height: 16 * @hd;
    }
    .user_list {
      margin-top: 4 * @hd;
      .user_item  {
        display: inline-block;
        width:15 * @hd;
        height:2 * @hd;
        border: 1px solid #ddd;
        &:not(:first-child) {
          margin-left: 5* @hd;
        }
        &.lq {
          background:rgba(40,140,78,1);
          border-color: rgba(40,140,78,1);
        }
        &.wc {
          background: rgba(241,155,44,1);
          border-color: rgba(241,155,44,1);
        }
      }
    }
    .name-and-date{
      font-size: 12 * @hd;
      margin-top: 4 * @hd;
    }
    .add-start{
      font-size: 12 * @hd;
      margin-left: 2 * @hd;
    }
  }
</style>
